<template>
  <div class="app-container">
    <div class="page-header">
      <div class="page-title">{{ isEdit ? '修改机构' : '添加机构' }}</div>
    </div>

    <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
      <!-- 基本信息 -->
      <div class="form-section">
        <div class="section-title">基本信息</div>

        <div class="form-row">
          <div class="form-item">
            <el-form-item label="机构名称" prop="hospitalName">
              <el-input
                  v-model="form.hospitalName"
                  placeholder="请输入名称"
                  style="width: 100%"
              />
            </el-form-item>
          </div>
        </div>

        <div class="form-row">
          <div class="form-item">
            <el-form-item label="机构Logo" prop="logo">
              <div class="avatar-upload-container">
                <el-upload
                    class="avatar-uploader"
                    :show-file-list="false"
                    :before-upload="beforeLogoUpload"
                    :http-request="handleLogoUpload"
                >
                  <div class="upload-area">
                    <el-icon v-if="!form.logo" class="avatar-uploader-icon"><Plus /></el-icon>
                    <img v-else :src="form.logo" class="avatar" />
                  </div>
                </el-upload>
                <div class="upload-tip">支持格式：jpg、png、jpeg，大小不超过2MB</div>
              </div>
            </el-form-item>
          </div>
        </div>
      </div>

      <!-- 医院地址 -->
      <div class="form-section">
        <div class="section-title">地址</div>

        <div class="address-select">
          <el-form-item label="省份" prop="province" class="address-item">
            <el-input
                v-model="form.province"
                placeholder="请输入省份"
                style="width: 100%"
            />
          </el-form-item>

          <el-form-item label="地市" prop="city" class="address-item">
            <el-input
                v-model="form.city"
                placeholder="请输入地市"
                style="width: 100%"
            />
          </el-form-item>

          <el-form-item label="区县" prop="district" class="address-item">
            <el-input
                v-model="form.district"
                placeholder="请输入区县"
                style="width: 100%"
            />
          </el-form-item>
        </div>

        <div class="form-row">
          <div class="form-item">
            <el-form-item label="详细地址" prop="address">
              <el-input
                  v-model="form.address"
                  placeholder="请填写街道地址及门牌号"
                  style="width: 100%"
              />
            </el-form-item>
          </div>
        </div>
      </div>

      <!-- 医院信息 -->
      <div class="form-section">
        <div class="section-title">机构信息</div>

        <div class="form-row">
          <div class="form-item">
            <el-form-item label="机构类型" prop="hospitalType">
              <el-select v-model="form.hospitalType" placeholder="请选择" style="width: 100%">
                <el-option label="医院" :value="1" />
                <el-option label="体检中心" :value="2" />
                <el-option label="诊所" :value="3" />
              </el-select>
            </el-form-item>
          </div>

          <div class="form-item">
            <el-form-item label="机构等级" prop="grade">
              <el-input
                  v-model="form.grade"
                  placeholder="请输入等级"
                  style="width: 100%"
              />
            </el-form-item>
          </div>
        </div>

        <div class="form-row">
          <div class="form-item">
            <el-form-item label="联系电话" prop="contactPhone">
              <el-input
                  v-model="form.contactPhone"
                  placeholder="请输入联系电话"
                  style="width: 100%"
              />
            </el-form-item>
          </div>
        </div>
      </div>

      <!-- 医院科室 -->
      <div class="form-section">
        <div class="section-title">科室</div>

        <div class="department-container">
          <!-- 一级科室 -->
          <div class="department-category">
            <div class="category-title">一级科室</div>
            <div class="category-list">
              <div
                  v-for="category in primaryDepartments"
                  :key="category.departmentId"
                  class="category-item"
                  :class="{ active: activePrimaryCategory === category.departmentId }"
                  @click="handlePrimaryCategoryClick(category)"
              >
                {{ category.departmentName }}
              </div>
            </div>
          </div>

          <!-- 二级科室 -->
          <div class="department-content">
            <div class="department-header">
              <div class="department-title">二级科室</div>
              <div class="department-actions">
                <el-checkbox
                    v-model="selectAllSecondary"
                    @change="handleSelectAllSecondary"
                >
                  全选
                </el-checkbox>
                <span class="selection-count">
                  已选择{{ selectedSecondaryCount }}项/共{{ currentSecondaryDepartments.length }}项
                </span>
              </div>
            </div>

            <div class="department-list">
              <div
                  v-for="dept in currentSecondaryDepartments"
                  :key="dept.departmentId"
                  class="department-item"
                  :class="{ selected: isDepartmentSelected(dept) }"
                  @click="toggleDepartment(dept)"
              >
                {{ dept.departmentName }}
              </div>
              <div v-if="currentSecondaryDepartments.length === 0" class="no-data">
                暂无二级科室数据
              </div>
            </div>
          </div>
        </div>

        <!-- 已选择科室 -->
        <div class="selected-departments" v-if="selectedDepartments.length > 0">
          <div class="selected-title">已选择科室</div>
          <div class="selected-list">
            <div
                v-for="(depts, categoryName) in groupedSelectedDepartments"
                :key="categoryName"
                class="selected-category"
            >
              <span class="category-name">{{ categoryName }}：</span>
              <span class="department-names">
                {{ depts.map(d => d.departmentName).join('、') }}
              </span>
            </div>
          </div>
        </div>
        <div v-else class="no-selected">
          暂未选择任何科室
        </div>
      </div>

      <!-- 医院简介 -->
      <div class="form-section">
        <div class="section-title">机构简介</div>

        <div class="form-row">
          <div class="form-item">
            <el-form-item label="简介" prop="description">
              <el-input
                  v-model="form.description"
                  type="textarea"
                  :rows="6"
                  placeholder="请输入简介"
                  style="width: 100%"
              />
            </el-form-item>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="form-actions">
        <el-button type="primary" size="large" @click="submitForm" :loading="loading">
          {{ loading ? '提交中...' : '提交' }}
        </el-button>
        <el-button size="large" @click="handleCancel" :disabled="loading">取消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { addHospitalWithDepartments, updateHospitalWithDepartments, getHospitalWithDepartments, listPrimaryDepartments, listChildrenDepartments, uploadLogo } from '@/api/institution/hospital'

const router = useRouter()
const route = useRoute()
const formRef = ref()
const loading = ref(false)

const isEdit = computed(() => route.path.includes('/edit/'))

// 表单数据
const form = reactive({
  hospitalName: '',
  logo: '',
  province: '',
  city: '',
  district: '',
  address: '',
  longitude: null,
  latitude: null,
  hospitalType: null,
  grade: '',
  contactPhone: '',
  description: '',
  status: '1'
})

// 表单验证规则
const rules = {
  hospitalName: [
    { required: true, message: '请输入医院名称', trigger: 'blur' }
  ],
  hospitalType: [
    { required: true, message: '请选择医院类型', trigger: 'change' }
  ]
}

// 科室数据
const primaryDepartments = ref([])
const secondaryDepartments = ref([])
const activePrimaryCategory = ref(null)
const selectedDepartments = ref([])
const selectAllSecondary = ref(false)

// 计算属性
const currentSecondaryDepartments = computed(() => {
  if (!activePrimaryCategory.value) {
    console.log('没有激活的一级科室')
    return []
  }

  const result = secondaryDepartments.value.filter(dept => dept.parentId === activePrimaryCategory.value)
  console.log('当前二级科室列表 - parentId:', activePrimaryCategory.value, '结果:', result)
  return result
})

const selectedSecondaryCount = computed(() => {
  if (!activePrimaryCategory.value) return 0
  return selectedDepartments.value.filter(dept => dept.parentId === activePrimaryCategory.value).length
})

const groupedSelectedDepartments = computed(() => {
  const grouped = {}
  selectedDepartments.value.forEach(dept => {
    const primaryDept = primaryDepartments.value.find(p => p.departmentId === dept.parentId)
    if (primaryDept) {
      if (!grouped[primaryDept.departmentName]) {
        grouped[primaryDept.departmentName] = []
      }
      grouped[primaryDept.departmentName].push(dept)
    }
  })
  return grouped
})

/** Logo上传前的验证 */
const beforeLogoUpload = (rawFile) => {
  const allowedTypes = ['image/jpeg', 'image/png', 'image/webp']
  const isImage = allowedTypes.includes(rawFile.type)
  const isLt2M = rawFile.size / 1024 / 1024 < 2

  if (!isImage) {
    ElMessage.error('Logo格式必须是 JPG、PNG 或 WebP!')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('Logo大小不能超过 2MB!')
    return false
  }
  return true
}

/** 自定义Logo上传方法 - 修改：新增机构时也可以上传Logo */
const handleLogoUpload = (options) => {
  const { file } = options

  // 对于新增页面，直接上传Logo到临时位置
  if (!isEdit.value) {
    const formData = new FormData()
    formData.append('file', file)
    // 对于新增机构，hospitalId传0或者不传，后端需要支持这种情况
    formData.append('hospitalId', '0')

    console.log('新增机构上传Logo:', {
      fileName: file.name,
      fileSize: file.size,
      fileType: file.type
    })

    uploadLogo(formData).then(response => {
      if (response.code === 200) {
        ElMessage.success('Logo上传成功')
        // 将返回的URL保存到表单中
        form.logo = response.msg
      } else {
        ElMessage.error(response.msg || 'Logo上传失败')
      }
    }).catch(error => {
      console.error('Logo上传失败:', error)
      ElMessage.error('Logo上传失败: ' + (error.message || '未知错误'))
    })
    return
  }

  // 以下是编辑页面的原有逻辑
  const hospitalId = route.params.id
  if (!hospitalId) {
    ElMessage.error('无法获取机构ID，请刷新页面重试')
    return
  }

  // 检查文件名，如果为空则设置默认文件名
  let uploadFile = file
  if (!file.name || file.name.trim() === '') {
    // 创建一个新的 File 对象，设置正确的文件名
    const fileExtension = getFileExtension(file)
    const newFileName = `hospital_logo_${hospitalId}${fileExtension}`

    // 创建新的 File 对象
    uploadFile = new File([file], newFileName, {
      type: file.type,
      lastModified: file.lastModified
    })
    console.log('修复文件名:', file.name, '->', newFileName)
  }

  const formData = new FormData()
  formData.append('file', uploadFile)
  formData.append('hospitalId', hospitalId.toString())

  console.log('上传文件信息:', {
    fileName: uploadFile.name,
    fileSize: uploadFile.size,
    fileType: uploadFile.type,
    hospitalId: hospitalId
  })

  uploadLogo(formData).then(response => {
    if (response.code === 200) {
      ElMessage.success('Logo上传成功')
      form.logo = response.msg
    } else {
      ElMessage.error(response.msg || 'Logo上传失败')
    }
  }).catch(error => {
    console.error('Logo上传失败:', error)
    ElMessage.error('Logo上传失败: ' + (error.message || '未知错误'))
  })
}

/** 根据文件类型获取文件扩展名 */
const getFileExtension = (file) => {
  const type = file.type
  if (type.includes('jpeg') || type.includes('jpg')) {
    return '.jpg'
  } else if (type.includes('png')) {
    return '.png'
  } else if (type.includes('webp')) {
    return '.webp'
  } else {
    return '.jpg' // 默认扩展名
  }
}

const loadPrimaryDepartments = async () => {
  try {
    console.log('开始加载一级科室...')
    const response = await listPrimaryDepartments()
    console.log('一级科室响应:', response)

    let departmentsData = []

    if (response.code === 200) {
      if (Array.isArray(response)) {
        departmentsData = response
      } else if (response.data && Array.isArray(response.data)) {
        departmentsData = response.data
      } else if (response.rows && Array.isArray(response.rows)) {
        departmentsData = response.rows
      }
    }

    console.log('最终一级科室数据:', departmentsData)

    if (departmentsData && departmentsData.length > 0) {
      // 过滤一级科室：level = '1'
      primaryDepartments.value = departmentsData.filter(dept => dept.level === '1')
      console.log('成功加载一级科室:', primaryDepartments.value.length, '个')

      // 设置第一个一级科室为激活状态
      if (primaryDepartments.value.length > 0) {
        activePrimaryCategory.value = primaryDepartments.value[0].departmentId
        console.log('激活第一个一级科室:', activePrimaryCategory.value)
        await loadSecondaryDepartments(activePrimaryCategory.value)
      }
    } else {
      console.warn('一级科室数据为空')
      ElMessage.warning('暂无科室数据，请联系管理员配置科室信息')
      primaryDepartments.value = []
    }
  } catch (error) {
    console.error('加载一级科室失败:', error)
    ElMessage.error('加载科室数据失败，请检查网络连接')
    primaryDepartments.value = []
  }
}

const loadSecondaryDepartments = async (parentId) => {
  try {
    console.log('开始加载二级科室，parentId:', parentId)
    const response = await listChildrenDepartments(parentId)
    console.log('二级科室响应:', response)

    let departmentsData = []

    if (response.code === 200) {
      if (Array.isArray(response)) {
        departmentsData = response
      } else if (response.data && Array.isArray(response.data)) {
        departmentsData = response.data
      } else if (response.rows && Array.isArray(response.rows)) {
        departmentsData = response.rows
      }
    }

    console.log('最终二级科室数据:', departmentsData)

    if (departmentsData && departmentsData.length > 0) {
      const newSecondaryDepts = departmentsData.filter(dept => dept.parentId === parentId)
      const existingIds = secondaryDepartments.value.map(dept => dept.departmentId)
      const uniqueNewDepts = newSecondaryDepts.filter(dept => !existingIds.includes(dept.departmentId))

      secondaryDepartments.value = [...secondaryDepartments.value, ...uniqueNewDepts]
      console.log('二级科室加载成功:', uniqueNewDepts.length, '个')
      console.log('当前所有二级科室:', secondaryDepartments.value)
      updateSelectAllStatus()
    } else {
      console.log('该一级科室下暂无二级科室')
      // 清空当前激活分类的二级科室
      secondaryDepartments.value = secondaryDepartments.value.filter(dept => dept.parentId !== parentId)
      updateSelectAllStatus()
    }
  } catch (error) {
    console.error('加载二级科室失败:', error)
    ElMessage.error('加载二级科室失败')
    // 清空当前激活分类的二级科室
    secondaryDepartments.value = secondaryDepartments.value.filter(dept => dept.parentId !== parentId)
    updateSelectAllStatus()
  }
}

const loadHospitalData = async () => {
  if (!isEdit.value) return

  const hospitalId = route.params.id
  try {
    console.log('开始加载机构数据，hospitalId:', hospitalId)
    const response = await getHospitalWithDepartments(hospitalId)
    console.log('机构数据响应:', response)

    let hospitalData = {}

    // 处理机构数据的响应格式
    if (response.code === 200) {
      if (response.data && typeof response.data === 'object') {
        hospitalData = response.data
      } else {
        // 如果只有 code 和 msg，尝试直接使用响应
        hospitalData = response
      }
    }

    if (hospitalData && hospitalData.hospitalId) {
      // 填充表单数据
      Object.keys(form).forEach(key => {
        if (hospitalData[key] !== undefined && hospitalData[key] !== null) {
          form[key] = hospitalData[key]
        }
      })

      console.log('表单数据填充完成')

      // 设置选中的科室 - 确保包含所有级别的科室
      if (hospitalData.departments && hospitalData.departments.length > 0) {
        selectedDepartments.value = hospitalData.departments
        console.log('设置选中科室:', selectedDepartments.value.length, '个')

        // 确保加载所有相关的一级和二级科室数据
        const uniqueParentIds = [...new Set(selectedDepartments.value.map(dept => dept.parentId))]
        for (const parentId of uniqueParentIds) {
          if (parentId && parentId !== 0) {
            await loadSecondaryDepartments(parentId)
          }
        }
      } else {
        console.log('该机构暂无关联科室')
      }
    } else {
      console.error('机构数据格式错误或为空')
      ElMessage.error('加载机构数据失败')
    }
  } catch (error) {
    console.error('加载机构数据失败:', error)
    ElMessage.error('加载机构数据失败')
  }
}

const handlePrimaryCategoryClick = async (category) => {
  console.log('点击一级科室:', category.departmentName, 'ID:', category.departmentId)
  activePrimaryCategory.value = category.departmentId
  await loadSecondaryDepartments(category.departmentId)
}

const isDepartmentSelected = (department) => {
  return selectedDepartments.value.some(dept => dept.departmentId === department.departmentId)
}

const toggleDepartment = (department) => {
  const index = selectedDepartments.value.findIndex(dept => dept.departmentId === department.departmentId)
  if (index > -1) {
    selectedDepartments.value.splice(index, 1)
  } else {
    selectedDepartments.value.push(department)
  }
  updateSelectAllStatus()
}

const handleSelectAllSecondary = (value) => {
  const currentDepts = currentSecondaryDepartments.value
  if (value) {
    currentDepts.forEach(dept => {
      if (!isDepartmentSelected(dept)) {
        selectedDepartments.value.push(dept)
      }
    })
  } else {
    selectedDepartments.value = selectedDepartments.value.filter(
        dept => dept.parentId !== activePrimaryCategory.value
    )
  }
  updateSelectAllStatus()
}

const updateSelectAllStatus = () => {
  const currentDeptIds = currentSecondaryDepartments.value.map(dept => dept.departmentId)
  const selectedCurrentDepts = selectedDepartments.value.filter(
      dept => currentDeptIds.includes(dept.departmentId)
  )
  selectAllSecondary.value = selectedCurrentDepts.length === currentDeptIds.length && currentDeptIds.length > 0
}

const submitForm = async () => {
  if (!formRef.value) return

  try {
    await formRef.value.validate()
    loading.value = true

    const submitData = {
      ...form,
      departmentIds: selectedDepartments.value.map(dept => dept.departmentId)
    }

    console.log('提交数据:', submitData)

    if (isEdit.value) {
      submitData.hospitalId = Number(route.params.id)
      await updateHospitalWithDepartments(submitData)
      ElMessage.success('修改机构成功')
    } else {
      await addHospitalWithDepartments(submitData)
      ElMessage.success('新增机构成功')
    }

    // 返回并刷新列表数据
    router.back()

    // 通过事件总线或全局属性触发刷新
    if (window.parent && window.parent.refreshHospitalList) {
      window.parent.refreshHospitalList()
    }

  } catch (error) {
    console.error('提交失败:', error)
    ElMessage.error('提交失败，请检查表单')
  } finally {
    loading.value = false
  }
}

const handleCancel = () => {
  router.back()
}

onMounted(async () => {
  console.log('组件挂载，开始加载数据...')
  await loadPrimaryDepartments()
  await loadHospitalData()
})
</script>

<style scoped lang="scss">
.app-container {
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.page-header {
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ebeef5;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  line-height: 1.4;
}

.form-section {
  margin-bottom: 32px;
  padding: 24px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background: #fff;
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 24px;
  color: #303133;
  display: flex;
  align-items: center;
  line-height: 1.4;

  &::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 16px;
    background: #409eff;
    margin-right: 12px;
    border-radius: 2px;
  }
}

.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.form-item {
  flex: 1;
  min-width: 0;
}

.address-select {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.address-item {
  flex: 1;
  margin-bottom: 0;
}

.avatar-upload-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.upload-area {
  border: 1px dashed #d9d9d9;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fafafa;
  transition: all 0.3s ease;

  &:hover {
    border-color: #409eff;
    background-color: #f0f7ff;
  }
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  transition: color 0.3s ease;
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

.upload-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 8px;
  line-height: 1.4;
}

.department-container {
  display: flex;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
  min-height: 400px;
  background: #fff;
}

.department-category {
  width: 220px;
  border-right: 1px solid #e4e7ed;
  background: #f8f9fa;
  display: flex;
  flex-direction: column;
}

.category-title {
  padding: 16px 20px;
  background: #f0f2f5;
  font-weight: 600;
  font-size: 14px;
  color: #303133;
  border-bottom: 1px solid #e4e7ed;
  line-height: 1.4;
}

.category-list {
  flex: 1;
  padding: 8px 0;
  overflow-y: auto;
}

.category-item {
  padding: 12px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
  line-height: 1.4;

  &:hover {
    background-color: #ecf5ff;
    color: #409eff;
  }

  &.active {
    background-color: #ecf5ff;
    color: #409eff;
    font-weight: 500;
    border-left-color: #409eff;
  }
}

.department-content {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.department-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.department-title {
  font-weight: 600;
  font-size: 14px;
  color: #303133;
  line-height: 1.4;
}

.department-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.selection-count {
  font-size: 13px;
  color: #909399;
  line-height: 1.4;
}

.department-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-height: 300px;
  overflow-y: auto;
  flex: 1;
  align-content: flex-start;
}

.department-item {
  width: calc(33.333% - 8px);
  padding: 12px 16px;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  line-height: 1.4;
  font-size: 13px;

  &:hover {
    border-color: #409eff;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
  }

  &.selected {
    background-color: #ecf5ff;
    border-color: #409eff;
    color: #409eff;
    font-weight: 500;
  }
}

.no-data {
  width: 100%;
  text-align: center;
  padding: 40px 20px;
  color: #909399;
  font-size: 14px;
  line-height: 1.4;
}

.selected-departments {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-top: 20px;
  border: 1px solid #e4e7ed;
}

.selected-title {
  font-weight: 600;
  margin-bottom: 16px;
  font-size: 14px;
  color: #303133;
  line-height: 1.4;
}

.selected-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.selected-category {
  display: flex;
  align-items: flex-start;
  line-height: 1.5;
}

.category-name {
  font-weight: 500;
  color: #303133;
  white-space: nowrap;
  flex-shrink: 0;
}

.department-names {
  color: #606266;
  line-height: 1.5;
}

.no-selected {
  padding: 20px;
  text-align: center;
  color: #909399;
  background: #f8f9fa;
  border-radius: 8px;
  margin-top: 20px;
  border: 1px dashed #e4e7ed;
  font-size: 14px;
  line-height: 1.4;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #ebeef5;
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-textarea textarea) {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

:deep(.el-input__inner),
:deep(.el-textarea__inner) {
  border-radius: 6px;
}

:deep(.el-button) {
  border-radius: 6px;
  font-weight: 500;
  min-width: 100px;
}

:deep(.el-checkbox) {
  margin-right: 0;
}
</style>